@charset "utf-8";

@function vw($a){
    @return ( $a / 320 ) * 100vw;
}

.web{
    position: relative;
    overflow: hidden;
    background: url(../img/game/game1-bg.jpg) black;
    background-size: 100% 100%;
}

.gameload{
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/index-bg1.jpg);
    background-size: 100% 100%;
    .loading-title{
        position: absolute;
        top: 13%;
        left: vw(115.5);
        width: vw(89);
        height: vw(23);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .loading-text{
        position: absolute;
        top: 93%;
        left: 48%;
    }
    .loading-feiji{
        position: absolute;
        top: 95%;
        left: 43.5%;
        width: vw(42);
        height: vw(44);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .loading-xian{
        position: absolute;
        top: 97%;
        left: 47%;
        width: vw(19.5);
        height: 100%;
        img{
            width: 100%;
            height: 100%;
        }
    }
}

.gameloaded{
    animation: loaded 1.5s both;
}
@keyframes loaded{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    99.9%{
        transform: scale(2);
        opacity: 0;
    }
    100%{
        transform: scale(0);
    }
}

.huoxing{
     position: absolute;
     z-index: 3;
     bottom: 0;
     left: 0;
     width: vw(320);
     height: vw(169.5);
     img{
         width: 100%;
         height: 100%;
     }
}

.game1{
    position: absolute;
    z-index: 6;
    background: transparent;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
}
.game-feiji{
    position: absolute;
    z-index: 5;
    top: 80%;
    left: 45%;
    width: vw(60.5);
    height: vw(83.5);
    img{
        width: 100%;
        height: 100%;
    }
}
.game-feijim{
    transition: 0.5s;
}
.count{
    position: absolute;
    z-index: 10;
    top: 8%;
    left: 15%;
    font-size: vw(8);
}

//陨石

.game-yunshi{
    position: absolute;
    z-index: 5;
    top: -100%;
    img{
        width: 100%;
        height: 100%;
    }
}
.game-yunshi1{
    width: vw(60.5);
    height: vw(58.5);
}
.game-yunshi2{
    width: vw(46.5);
    height: vw(45);
}
.game-yunshi3{
    width: vw(96);
    height: vw(107.5);
}
.game-yunshi4{
    width: vw(67);
    height: vw(56);
}
.game-yunshi5{
    width: vw(68.5);
    height: vw(76);
}
.game-yunshi6{
    width: vw(81.5);
    height: vw(85.5);
}
.game-yunshi7{
    width: vw(95);
    height: vw(62);
}
.game-yunshi8{
    width: vw(60.5);
    height: vw(62);
}

//能量

.nengliang{
    position: absolute;
    z-index: 5;
    top: -100%;
    width: vw(112);
    height: vw(107.5);
    img{
        width: 100%;
        height: 100%;
    }
}

.game-tip{
    position: fixed;
    z-index: 30;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    .game-tip-box{
        position: absolute;
        width: vw(294.5);
        height: vw(125);
        top: 20%;
        left: vw(12.75);
        background: url(../img/game/game-tip-bg.png) no-repeat;
        background-size: 100% 100%;
        .game-tip-left{
            float: left;
            box-sizing: border-box;
            padding-top: 30px;
            width: 50%;
            .game-tip-pic{
                float: left;
                width: 45%;
                img{
                    width: 100%;
                }
            }
            p{
                float: left;
                margin-top: 15px;
                font-size: vw(10);
            }
        }
        .game-tip-left:first-of-type{
            padding-left: 46px;
        }
    }
    .game-tip-text{
        position: absolute;
        top: 50%;
        left: 19%;
        p{
            font-size: vw(11);
            text-align: center;
            line-height: vw(18);
        }
    }
    .game-tip-liaojie{
        position: absolute;
        top: 75%;
        left: vw(85.75);
        width: vw(148.5);
        height: vw(65.5);
        ul,li{
            width: 100%;
            height: 100%;
        }
        li>img{
            width: 100%;
            height: 100%;
        }
        li .page3-you:first-of-type{
            left: 18%;
            top: 38%;
        }
        li .page3-you:nth-of-type(2){
            left: 22%;
            top: 38%;
        }
        li .page3-you:nth-of-type(3){
            right: 18%;
            top: 38%;
        }
        li .page3-you:nth-of-type(4){
            right: 22%;
            top: 38%;
        }
    }
}
.game-tipa{
    animation: gametip 1s both;
}

@keyframes gametip{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    100%{
        transform: scale(0);
        opacity: 0;
    }
}


//game2

#web-game2{
    background: url(../img/game/game2-bg.jpg) black;
    background-size: 100% 100%;
}

.game-yunshi9{
    width: vw(78.5);
    height: vw(76.5);
}
.game-yunshi10{
    width: vw(101);
    height: vw(106.5);
}
.game-yunshi11{
    width: vw(117);
    height: vw(117);
}
.game-yunshi12{
    width: vw(82);
    height: vw(82);
}
.game-yunshi13{
    width: vw(63);
    height: vw(62);
}
.game-yunshi14{
    width: vw(82.5);
    height: vw(70.5);
}
.game-yunshi15{
    width: vw(173);
    height: vw(187);
}
.game-yunshi16{
    width: vw(99);
    height: vw(103);
}
.game-yunshi17{
    width: vw(107);
    height: vw(90.5);
}
.game-yunshi18{
    width: vw(63.5);
    height: vw(64);
}

.game2-start{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    transition: 1s;
    p{
        font-size: vw(20);
        text-align: center;
        margin-top: 40%;
        animation: ping 2s ease-in-out infinite both;
    }
}

@keyframes ping{
    0%{
        transform:scale(.5);
        opacity:.8;
    }
    80%{
        transform:scale(1.2);
        opacity:0;
    }
    100%{
        transform:scale(2.2);
        opacity:0;
    }
}

.game2-starta{
    transform: scale(0);
}



//game3

#web-game3{
    background: url(../img/game/game3-bg.jpg) black;
    background-size: 100% 100%;
}

.game-yunshi19{
    width: vw(78.5);
    height: vw(76.5);
}
.game-yunshi20{
    width: vw(78);
    height: vw(80.5);
}
.game-yunshi21{
    width: vw(179.5);
    height: vw(185);
}
.game-yunshi22{
    width: vw(150.5);
    height: vw(141);
}
.game-yunshi23{
    width: vw(65.5);
    height: vw(65.5);
}
.game-yunshi24{
    width: vw(56.5);
    height: vw(56);
}
.game-yunshi25{
    width: vw(213.5);
    height: vw(151);
}
.game-yunshi26{
    width: vw(107);
    height: vw(90.5);
}

.fenxiang{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    display: none;
    opacity: 0;
    .fenxiang-pic{
        position: absolute;
        top: vw(20);
        left: 0;
        width: vw(294);
        height: vw(118);
        img{
            width: 100%;
            height: 100%;
        }
    }
    p{
        font-size: vw(12);
        text-align: justify;
        position: absolute;
        left: 30%;
        top: vw(110);
    }
    .fenxiang-pic2{
        position: absolute;
        top: vw(160);
        left: vw(60);
        width: vw(205);
        height: vw(89.5);
        img{
            width: 100%;
            height: 100%;
        }
    }
}

.fenxianga{
    display: block;
    animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;
    animation-delay: 1s;
}


@keyframes fade-in{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
